<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px;" @click="add">添加分类</el-button>
        <!-- //表格 -->
        <tree-table :data="splist" :columns="defaultProps" :selection-type="false" :expand-type="false" index-text="索引"
            :show-row-hover="false" show-index border>
            <!-- 是否有效 -->
            <template slot="isok" slot-scope="scope">
                <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false"></i>
            </template>
            <!-- 排序 -->
            <template slot="sorts" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
                <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
            </template>
            <!-- 操作 -->
            <template slot="caozuo" slot-scope="scope">
                <el-button type="primary" size="mini" @click="editOpen(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="del(scope.row.cat_id)">删除</el-button>
            </template>
        </tree-table>
        <!-- 添加用户 -->
        <el-dialog title="添加分类" :visible.sync="addCart" width="50%">
            <el-form :model="addFrom" status-icon label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称">
                    <el-input type="text" v-model="addFrom.classifyName"></el-input>
                </el-form-item>
                <el-form-item label="父类名称">

                    <el-cascader v-model="addFrom.classifyId" :options="options"
                        :props="{ checkStrictly: true, label: 'cat_name', value: 'cat_id' }" clearable></el-cascader>
                    {{  addFrom.classifyId  }}
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="confirm">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- //分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="form.pagenum" :page-sizes="[3, 5, 7, 10]" :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- //编辑分类 -->
        <el-dialog title="编辑分类信息" :visible.sync="editPop" width="50%">
            <el-form :model="addFrom" status-icon label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称">
                    <el-input type="text" v-model="addFrom.classifyName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="edit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { categories, addGoodsc, editClassify, deleteClassify } from '@/http/goods'
export default {
    data() {
        return {
            //弹出窗
            addCart: false,
            //编辑弹出框
            editPop: false,
            //添加分类form
            addFrom: {
                classifyName: '',
                classifyId: ''
            },
            //总条数
            total: 0,
            options: [],
            //请求分类参数
            form: {
                // type: [1, 2, 3],
                pagenum: 1,
                pagesize: 5
            },
            defaultProps: [
                {
                    label: "分类名称",
                    prop: "cat_name",
                },
                {
                    label: "是否有效",
                    // 表示当前列为模板列
                    type: "template",
                    // 表示当前这一列的模板名称
                    template: "isok",
                },
                {
                    label: "排序",
                    type: "template",
                    template: "sorts",
                },
                {
                    label: "操作",
                    type: "template",
                    template: "caozuo",
                },
            ],
            splist: [],
            addFormdefaultProps: {
                label: "cat_name",
                value: "cat_id",
                checkStrictly: true
            }

        }
    },
    methods: {
        //渲染页面
        async fn() {
            let res = await categories(this.form)
            console.log(res);

            this.splist = res.data.result
            this.total = res.data.total

        },
        //条数发生变化
        handleSizeChange(v) {
            this.form.pagesize = v
            this.fn()
        },
        //页数发生变化
        handleCurrentChange(v) {
            this.form.pagenum = v
            this.fn()
        },
        //确定添加
        async confirm() {
            let cat_pid = this.addFrom.classifyId[this.addFrom.classifyId.length - 1] || 0
            let cat_name = this.addFrom.classifyName
            let cat_level = this.addFrom.classifyId.length
            let res = await addGoodsc({ cat_pid, cat_name, cat_level })
            this.addCart = false
            this.fn()
            this.addFrom = {
                classifyName: '',
                classifyId: ''
            }

        },
        //打开弹出框发起请求
        async add() {
            let res = await categories({ type: 2 })
            console.log(res);
            this.options = res.data
            this.addCart = true
        },
        //打开编辑的弹出框
        editOpen(v) {
            let { cat_id, cat_name } = v
            console.log(cat_id);
            this.addFrom.classifyName = cat_name
            this.addFrom.classifyId = cat_id
            this.editPop = true
        },
        // 编辑确定
        async edit() {

            let res = await editClassify(this.addFrom.classifyId, { cat_name: this.addFrom.classifyName })

            this.addFrom.classifyName = ''
            this.addFrom.classifyId = ''
            this.fn()
            this.editPop = false
        },
        //删除分类
        async del(id) {
            let res = await deleteClassify(id)
            this.fn()
        }
    },
    created() {
        this.fn()
    }

}
</script>

<style lang="scss" scoped>
</style>